button, .radio-strip label {
  background: linear-gradient(#efefef, #e5e5e5);
  padding: 0.3em 0.6em;
  border: 1px solid #999;
  border-radius: 2px;
  box-shadow: 0 0 1px 1px #fff inset;
  overflow: hidden;
  color: #222;
  line-height: 1;
}

button:not(:disabled):hover, .radio-strip input[type=radio]:not(:disabled) + label:hover {
  border-color: #777;
}

button:active, .radio-strip input[type=radio] + label:active {
  background: linear-gradient(#dadada, #e5e5e5);
  border-color: #aaa;
  box-shadow: 0 0 1px 1px #ccc inset;
}

.radio-strip input[type=radio]:checked + label {
  background: linear-gradient(#dadada, #d5d5d5);
  border-color: #888;
  box-shadow: 0 0 1px 1px #ccc inset;
}

button:disabled, .radio-strip input[type=radio]:disabled + label {
  color: #aaa;
}

.button-strip button, .radio-strip label {
  &:not(:last-of-type) { border-right: 0; border-radius: 0; }
  &:first-of-type { border-radius: 2px 0 0 2px; }
  &:last-of-type { border-radius: 0 2px 2px 0; }
}

.flat-button-strip {
  display: flex;
  background: rgba(0,0,0,0.05);
  border-bottom: 1px solid #acacac;
}

.flat-button-strip button {
  flex: 1;
  height: 35px;
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;

  opacity: 0.5;
  cursor: pointer;

  &:hover { background-color: rgba(0,0,0,0.1); opacity: 1; }
  &:active { background-color: #fff; }
  &:disabled { opacity: 0.2; cursor: default; }
}

.radio-strip input[type=radio] {
  display: none;
}
